<template>
  <view class="">
    <no-data v-if="!props.commentList || props.commentList.length <= 0" title="暂无评论"></no-data>
    <view v-else class="comment" v-for="(item,index) in props.commentList" :key="item.commentId">
      <view class="comment-item">
        <view class="info row">
          <image :src="item.userImage || '/static/tab/my.png' " mode="aspectFill"></image>
          <view class="user">
            <view class="">{{item.nickName}}</view>
            <view class="">{{item.createDate}}</view>
          </view>
          <text :class="{grey:!item.isGood}" class="iconfont icon-haoping2"></text>
        </view>
        <view class="content">
          {{item.content}}
        </view>
        <view class="reply" v-if="item.children && item.children.content">
          <text>{{item.children.nickName}}讲师回复：</text>
          <text> {{item.children.content}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {reactive,getCurrentInstance,nextTick} from 'vue'

  const props = defineProps({  
    commentList:{
      type:Array,
      default: () => [
        {
          commentId:1,
          nickName:"啊哈",
          userImage:null,
          isGood:1,
          content:"课程内容详细，讲解的很好，很细心，服务也很好",
          createDate:Date.now(),
          children:null
        },
        {
          commentId:2,
          nickName:"啊特",
          userImage:null,
          isGood:0,
          content:"课讲的很差",
          createDate:Date.now(),
          children:{
            replyId:1,
            nickName:"老k",
            userImage:null,
            content:"会慢慢优化"
          }
        }
      ]
    }
  })
  

</script>

<style scoped lang="scss">
  .title{
    color: #999;
    font-size: 30rpx;
  }
  .comment{
    font-size: 30rpx;
    padding: 0 36rpx;
    background-color: #fff;
    .comment-item{
      margin-top: 36rpx;
      border-bottom: 0.5px solid #efeff4;
      .info{
        image{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50rpx;
          margin-right: 20rpx;
        }
        .user{
          font-weight: bold;
          line-height: 33rpx;
          :last-child{
            color: #999;
            font-size: 25rpx;
            font-weight: normal; 
          }
        }
        :last-child{
          margin-left: auto;
          font-size: 25px;
          color: #ff001b;
        }
        .grey{
          color: $mxg-text-color-grey;
        }
      }
    
      .content{
        margin: 25rpx 0;
      }
      .reply{
        background-color: #f8f9fb;
        padding: 15rpx;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        color: #7d828F;
        font-size: 25rpx;
      }
    }
  }
</style>